Get Started

Documentação

Get-started

Basic

Grid

Documentação

Get-started

Basic

Grid

Row/Row-reverse/Column/Column-reverse

Row

Row (default): left to right in ltr; right to left in rtl.

1
2
3 
<div class="container row">
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
  </div>

Row-reverse

Right to left in ltr; left to right in rtl.

1
2
3 
<div class="container row-reverse">
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
  </div>

Column

Same as row but top to bottom.

1
2
3 
<div class="container column">
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
  </div>

Column-reverse

Same as row-reverse but bottom to top.

1
2
3 
<div class="container column-reverse">
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
      <div class="flex">
        ...
      </div>
  </div>